<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1>欢迎使用经销商业务管理系统</h1>
      <p>今天是 {{ currentDate }}，祝您工作顺利！</p>
    </div>
    
    <el-row :gutter="20" class="dashboard-stats">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #409EFF;">
              <el-icon size="24" color="white"><ShoppingCart /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.todayPurchases }}</h3>
              <p>今日采购单</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #67C23A;">
              <el-icon size="24" color="white"><Sell /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.todaySales }}</h3>
              <p>今日销售单</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #E6A23C;">
              <el-icon size="24" color="white"><Box /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ stats.lowStockItems }}</h3>
              <p>库存预警</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #F56C6C;">
              <el-icon size="24" color="white"><Money /></el-icon>
            </div>
            <div class="stat-info">
              <h3>¥{{ stats.todayRevenue }}</h3>
              <p>今日收入</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>销售趋势</span>
          </template>
          <div class="chart-placeholder">
            <el-empty description="销售趋势图表" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>库存状态</span>
          </template>
          <div class="chart-placeholder">
            <el-empty description="库存状态图表" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="dashboard-tables">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>最近采购订单</span>
          </template>
          <el-table :data="recentPurchases" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="120" />
            <el-table-column prop="supplier" label="供应商" />
            <el-table-column prop="amount" label="金额" width="100" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>最近销售订单</span>
          </template>
          <el-table :data="recentSales" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="120" />
            <el-table-column prop="customer" label="客户" />
            <el-table-column prop="amount" label="金额" width="100" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="{ row }">
                <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentDate = computed(() => {
  const date = new Date()
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

const stats = ref({
  todayPurchases: 12,
  todaySales: 8,
  lowStockItems: 15,
  todayRevenue: '25,680'
})

const recentPurchases = ref([
  { orderNo: 'PO20240101001', supplier: '供应商A', amount: '¥5,200', status: '已完成' },
  { orderNo: 'PO20240101002', supplier: '供应商B', amount: '¥3,800', status: '进行中' },
  { orderNo: 'PO20240101003', supplier: '供应商C', amount: '¥7,500', status: '已完成' }
])

const recentSales = ref([
  { orderNo: 'SO20240101001', customer: '客户X', amount: '¥2,800', status: '已完成' },
  { orderNo: 'SO20240101002', customer: '客户Y', amount: '¥4,200', status: '进行中' },
  { orderNo: 'SO20240101003', customer: '客户Z', amount: '¥6,100', status: '已完成' }
])
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 30px;
}

.dashboard-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.dashboard-header p {
  color: #666;
  font-size: 16px;
}

.dashboard-stats {
  margin-bottom: 20px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-info h3 {
  font-size: 24px;
  color: #333;
  margin: 0 0 5px 0;
}

.stat-info p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.dashboard-charts,
.dashboard-tables {
  margin-bottom: 20px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
